<template>
	<view :class="Visible ? 'usable-coupon open' : 'usable-coupon close'">
		<view class="popup-bg" @click="closePopup(null)"></view>
		<view class="main pt30" v-on:click.stop :data-theme="theme()" :class="theme() || ''">
			<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
				<view class="p-0-20 section">
					<view class="supplier_list">

						<view class="item" v-for="(item, index) in datalist" :key="index">
							<checkbox-group @change="checkItem(item, index)">
								<label class="d-c-c">
									<radio style="transform:scale(0.7)" value="cb" class="checkbox" :checked="item['checked']" />
								</label>
							</checkbox-group>
							<image :src="item.productImage" class="cover" mode="aspectFit"></image>
							<view class="info">
								<view class="title">{{ item.productName }}</view>
								<view class="describe">{{ item.productAttr }}</view>
								<view class="level-box count_choose">
									<view class="price">
										¥
										<text class="num">{{ item.productPrice }}</text>
									</view>
									<view class="num-wrap">
										
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="coupon-btns"><button type="default" @click="selectCoupon(0)" class="btn-cancel">立即使用</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*是否可见*/
				Visible: false,
				/*优惠券列表*/
				datalist: {},
				/*尺寸比例*/
				ratio: 1,
				current: 0,
				actIndex:-1
			};
		},
		props: ['isCoupon', 'couponList'],

		onLoad() {},
		mounted() {
			this.init();
		},
		watch: {
			isCoupon: function(n, o) {
				if (n != o) {
					this.Visible = n;
					this.datalist = this.couponList;
					this.datalist.map(val=>{
						val['checked'] = false
					})
					this.getHeight();
				}
			}
		},
		methods: {
			// 单选
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						self.ratio = res.windowWidth / 750;
						self.getHeight();
					}
				});
			},
			checkItem(row,index){
				this.datalist.map(val=>{
					val['checked'] = false
				})
				row['checked'] = !row['checked']
				this.actIndex = index;
			},
			/*获取高度*/
			getHeight() {
				let count = Object.keys(this.couponList).length;
				if (count > 2) {
					this.scrollviewHigh = this.phoneHeight * 0.7;
				} else {
					if (count == 1) {
						this.scrollviewHigh = 260 * this.ratio;
					} else if (count == 2) {
						this.scrollviewHigh = 520 * this.ratio;
					}
				}
			},

			/*选择优惠券*/
			selectCoupon(e) {
				// 选择了优化券
				let row = {};
				// giftProduct = {"productId":0,"skuId": 0,"activityId":0"batchId":0}
				if(e == 0){
					row['productId'] = this.datalist[this.actIndex]['productId']
					row['skuId'] = this.datalist[this.actIndex]['productSku']['productSkuId']
					row['activityId'] = this.datalist[this.actIndex]['activityId']
					row['batchId'] = this.datalist[this.actIndex]['batchId']
					row['productName'] = this.datalist[this.actIndex]['productName']
				}
				this.closePopup(row,e);
			},
			/*关闭弹窗*/
			closePopup(row = null,e) {
				this.$emit('close', {row,e});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.usable-coupon .popup-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
	}

	.usable-coupon .main {
		position: fixed;
		width: 100%;
		min-height: 600rpx;
		background-color: #fff;
		transform: translate3d(0, 2980rpx, 0);
		transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
		bottom: 0;
		z-index: 99;
	}

	.usable-coupon .main {
		position: fixed;
		width: 100%;
		min-height: 200rpx;
		background-color: #f6f6f6;
		transform: translate3d(0, 2980rpx, 0);
		transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
		bottom: 0px;
		z-index: 99;
	}

	.usable-coupon.open .main {
		transform: translate3d(0, 0, 0);
	}

	.usable-coupon.close .popup-bg {
		display: none;
	}

	.coupon-btns .btn-cancel {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		background: #19ad57;
		color: #ffffff;
		border-radius: 0;
	}

	.item-wrap {
		border: 1px solid #eee;
	}

	.txt {
		padding: 2rpx 20rpx;
		background: linear-gradient(180deg, #fc4133, #ff7a04);
		border-radius: 5rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		color: #fff;
		font-size: 22rpx;
		display: inline-block;
	}

	.section {
		background: #f2f2f2;
		padding: 20rpx;
	}

	.section .item {
		margin: 0 26rpx;
		display: flex;
		align-items: center;
		// border: 1px solid #f2f2f2;
		padding-right: 19rpx;
		padding-bottom: 29rpx;
		padding-top: 29rpx;
	}

	.section .cover {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8px;
	}

	.section .info {
		flex: 1;
		padding-left: 30rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.section .title {
		width: 100%;
		font-size: 28rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.vender .list .describe {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.section .describe {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.section .price {
		// color: $dominant-color;
		@include font_color("font_color");
		font-size: 24rpx;
	}

	.bottom-btns.isAuto {
		bottom: 140rpx;
	}

	.section .price .num {
		padding: 0 4rpx;
		font-size: 32rpx;
	}

	.section .level-box {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.section .level-box .key {
		font-size: 24rpx;
		color: #999999;
	}

	.section .level-box .num-wrap {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.section .level-box .icon-box {
		width: 33rpx;
		height: 33rpx;
		border: 1px solid #c5c5c5;
		background: #f2f2f2;
	}

	.section .level-box .icon-box .gray {
		color: #cccccc;
	}

	.section .level-box .icon-box .gray3 {
		color: #333333;
	}

	.section .level-box .text-wrap {
		margin: 0 20rpx;
		height: 33rpx;
		border: none;
		background: none;
	}

	.section .level-box .text-wrap input {
		padding: 0 4rpx;
		height: 33rpx;
		line-height: 1;
		width: 40rpx;
		font-size: 32rpx;
		text-align: center;
		display: flex;
		align-items: center;
		min-height: 33rpx;
	}
</style>